<template>
    <div>
      <el-row>
        <el-card>
          <el-row>
            <el-col :span="24" align="middle">
              <span v-html="notice.content"></span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              {{notice.name + ' --> ' + notice.updateTime}}
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-row :gutter="2" style="margin-top: 1%" v-for="i in Math.ceil((classesData.length) / 4)" :key="i">
        <el-col :span="6" v-for="(o, index) in classesData.slice((i - 1) * 4, i * 4)" :key="index" align="middle">
          <el-card :body-style="{ padding: '0px' }" style="width: 220px;height: 250px" shadow="hover">
            <div class="imgSize">
              <img :src="o.img" class="image">
            </div>
            <div style="padding: 14px;">
              <span>{{o.name}}</span>
              <div class="bottom clearfix">
<!--                <time class="time">{{ currentDate }}</time>-->
                <el-button type="text" class="button" @click="goAddress(o.url)">前往官网</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
<!--      <el-row :gutter="2"  >-->
<!--        <el-col :span="6" v-for="(o, index) in 4" :key="index" align="middle">-->
<!--          <el-card :body-style="{ padding: '0px' }" style="width: 250px;height: 320px" shadow="hover">-->
<!--            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
<!--            <div style="padding: 14px;">-->
<!--              <span>好吃的汉堡</span>-->
<!--              <div class="bottom clearfix">-->
<!--                &lt;!&ndash;                <time class="time">{{ currentDate }}</time>&ndash;&gt;-->
<!--                <el-button type="text" class="button">操作按钮</el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>
</template>

<script>
  import {selectAllClasses, selectNotice} from "../api/ojm";
    import {mixin} from "../mixins";

    export default {
      name: "OJM",
      mixins: [mixin],
      data() {
        return {
          classesData: [],
          notice: {}
        };
      },
      created() {
        this.init();
      },
      methods: {
        init(){
          selectAllClasses().then(({data}) => {
            if(data.code === 0){
              this.classesData = data.classes
              selectNotice().then(({data}) => {
                this.notice = data.notice
              }).catch(err => {
                console.error()
              })
            }else{
              this.notify("初始化失败，请稍后再试", "error")
            }
          }).catch(err => {
            this.notify("初始化失败，请稍后再试", "error")
          })
        },
        goAddress(url){
          window.open(url, '_blank');
        }
      }
    }
</script>

<style>
  .imgSize {
    width: 170px;
    height: 170px;
    display:table-cell; vertical-align:middle;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

